﻿/* CSS Document */
/*transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;*/
@font-face{
    font-family: 'Bodoni';
    src:url(../fonts/BodoniStd-Italic.otf);
}
@font-face{
    font-family: 'Poppins';
    src:url(../fonts/Poppins-SemiBold.ttf);
}
@font-face{
    font-family: 'Lato';
    src:url(../fonts/LATO-LIGHT.WOFF.TTF);
}
@font-face{
    font-family: 'Playfair';
    src:url(../fonts/PlayfairDisplay-Regular.ttf);
}
@font-face{
    font-family: 'Sans';
	src:url(../fonts/OpenSans-Regular.ttf);
}
@font-face{
    font-family: 'Raleway';
    src:url(../fonts/Raleway-400-Regular.otf);
}



body,div,ul,li,h1,h2,h3,h4,h5,p,table,td,tr,p,dl,dt,dd{ padding:0; margin:0; list-style:none;}
body{ font-family:"微软雅黑"; font-size:14px; color:#262626;font-size: 0.8vw;}
a{ color:#666; text-decoration:none;transition: .6s;}
a:hover{}
img{ border:0;}
.clear:after{content:""; display:block; clear:both;}
.fl-1,.fl-2,.fl-3,.fl-4,.fl-5,.fl-6,.fl-7,.fl-8,.fl-9,.fl-10,.fl-11,.fl-12{float:left;box-sizing:border-box; padding-left:25px; padding-right:25px;}
.fr-1,.fr-2,.fr-3,.fr-4,.fr-5,.fr-6,.fr-7,.fr-8,.fr-9,.fr-10,.fr-11,.fr-12{float:right;box-sizing:border-box; padding-left:25px; padding-right:25px;}
.fl-1,.fr-1{width:calc(100%/12);}
.fl-2,.fr-2{width:calc(100%/12*2);}
.fl-3,.fr-3{width:calc(100%/12*3);}
.fl-4,.fr-4{width:calc(100%/12*4);}
.fl-5,.fr-5{width:calc(100%/12*5);}
.fl-6,.fr-6{width:calc(100%/12*6);}
.fl-7,.fr-7{width:calc(100%/12*7);}
.fl-8,.fr-8{width:calc(100%/12*8);}
.fl-9,.fr-9{width:calc(100%/12*9);}
.fl-10,.fr-10{width:calc(100%/12*10);}
.fl-11,.fr-11{width:calc(100%/12*11);}
.fl-12,.fr-12{width:calc(100%/12*12);}

.swiper-slide img{ width: 100%;
  height: 100%;max-width:100%;}
img{max-width: 100%; vertical-align: middle;}
.wid{ width:1240px; margin:0 auto;padding:3% 0;}
.wid:after{ content:""; display:block; clear:both;}
.mid_h2{font-size:26px; line-height:36px;color:#242e35; margin-bottom: 20px; padding-top: 15px;}
.mid_h3{ font-size:18px; line-height:28px; margin-bottom:10px;color:#333; padding-top: 20px;}
.mid_h4{ font-size:14px; line-height:26px; margin-bottom:10px;color:#333;}
.mid_text p{ font-size:0.8vw; color:#7e7e7e; line-height:26px; margin-bottom:10px;}
.mid_flex{display: flex; align-items: center;flex-wrap:wrap;}


.header{padding: 15px 0;}
.logo{float: left;}
.logo img{max-height: 60px;}
.nav{float: right; padding: 15px 0;}
.nav li{position: relative; display: inline-block; margin: 0 20px;}
.nav li>a{position: relative; display: block; padding: 0px 0px 10px; line-height: 20px; color: #222; font-size: 15px; font-weight: bold;}
.nav li>a:after{content: ""; position: absolute;left: 0; top: 100%; width: 0; height: 2px; background: #1E73BE;; transition: .6s;}
.nav li .erji{position: absolute; left: 0; top:calc(100% + 2px); background: #1E73BE; padding: 15px; white-space: nowrap; display: none; z-index: 2000;}
.nav li .erji a{display: block; padding: 0 15px; line-height: 26px; font-size: 13px; color: #fff; margin: 2px 0; border-radius: 50px;}
.nav li .erji a:hover{background: #fff; color: #00C3FC;}
.nav li>a.act{color: #1E73BE;}
.nav li>a.act:after{width: 100%;}
.nav li:hover>a{color: #1E73BE;}
.nav li:hover>a:after{width: 100%;}

.banner .swiper-pagination{bottom: 25px;}
.banner .swiper-pagination-bullet{width: 30px; height: 6px; border-radius: 0; opacity: .5; background: #fff;}
.banner .swiper-pagination-bullet-active{background: #1E73BE;;opacity: 1;}
.ban_bg{position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: rgba(255,255,255,.7); padding-right: 25px; box-sizing: border-box;}
.ban_text{position: absolute; top: 0; z-index: 1000; padding: 9% 20px 0 16%; box-sizing: border-box; transform: translateX(-200px); opacity: 0; transition: .6s;}
.ban_text h1{ color: #fff; font-size: 3vw; line-height: 60px; font-weight: normal;padding: 6% 0 5% 0;}
.ban_text h2{ color: #fff; font-size: 36px; line-height: 46px; font-weight: normal;}
.ban_text .xian{width: 80px; height: 6px; background: #A40102; margin: 15px 0 20px;}
.ban_text p{font-size: 18px; line-height: 36px; color: #fff;}
.ban_text a{display: inline-block; padding: 5px 20px; line-height: 24px; background: #1E73BE;; color: #fff; margin-top: 25px;}
.ban_text a:hover{background: #00C3FC;}

.banin .ban_text{transform: translate(0); opacity: 1;}

.home_title{font-size: 36px; text-align:center; line-height: 46px; font-weight: normal;}
.home_xian{ text-align: center; color: #A40102; font-size: 22px; margin: 10px 0 15px;}
.home_xian:before{ content: ""; width: 50px; height: 3px; background: #A40102; display: inline-block; margin:0 13px 5px 0;}
.home_xian:after{ content: ""; width: 50px; height: 3px; background: #A40102; display: inline-block; margin: 0 0 5px 13px;}
.home_des{max-width: 800px; padding: 0 10px; text-align: center; color: #7e7e7e; margin: 0 auto; line-height: 26px; font-size: 14px;}

.home_pro{padding: 70px 0;}
.home_pro_nav{padding: 45px 0 15px;}
.home_pro_nav a{display: inline-block; padding: 5px 15px; line-height: 28px; font-size: 16px; border: 1px solid #ccc; color: #222; margin-right: 10px;}
.home_pro_nav a.act{background: #A40102; color: #fff; border: 1px solid #A40102;}
.home_pro_nav a:hover{background: #A40102; color: #fff; border: 1px solid #A40102;}
.home_pro_nav a.more{background: #222; color: #fff; border: 1px solid #222; float: right;}
.home_pro_nav a.more:hover{background: none; color: #222;}

.home_pro_cont{display: none;}
.home_pro_cont.show{display: block;animation: show .8s linear;}
.home_pro_box{float: left; width: 25%; border: 1px #CCCCCC solid; box-sizing: border-box;}
.home_pro_box .pic{position: relative;}
.home_pro_box .pic span{position: absolute; top: 0; left: 0; display: flex;align-items: center;justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,.5); opacity: 0; transition: .6s;}
.home_pro_box .pic span i{color: #ccc; font-size: 50px;}
.home_pro_box .text{width: 70%; margin: 0 auto; border-top: 1px dashed #ccc; text-align: center; padding: 15px 0;}
.home_pro_box .text h4 a{color: #000;}
.home_pro_box .text .more{ display: inline-block; margin-top: 25px; padding: 2px 15px; line-height: 22px; font-size: 12px; border: 2px solid #bfbfbf;}
.home_pro_box:hover .pic span{opacity: 1;}
.home_pro_box:hover .text .more{background: #A40102; color: #fff; border: 2px solid #A40102;}
.home_pro_box:hover h4 a{color: #A40102;}




.home_com_bg{overflow: hidden;}
.home_com{}
.home_com_left{width: 50%;background-image: url(../images/intro1.png);background-size: cover;}
.home_com_left h2{font-size: 30px;line-height: 40px;padding: 5% 0 2% 6%;}
.home_com_left .xian{margin: 5% 0 2% 6%;}
.xian{width: 120px;height: 6.67px;background: #17CAF1;}
.home_com_left h3{font-size: 18px; line-height: 28px; margin-bottom: 10px;}
.home_com_left p{color: #7e7e7e; line-height: 30px; margin-bottom: 10px; text-indent: 2em;padding: 5% 7% 2% 7%;font-size:1.2vw;}
.home_com_left a{margin-top: 25px;margin-bottom: 50%;}
.home_com_left a:hover{background: #00C3FC;}
.home_com_right{float: right; width: 50%; padding: 0 0 0 30px; box-sizing: border-box;}
.abutton{display: inline-block;padding: 5px 20px;line-height: 24px;background: #1E73BE;;color: #fff;}

.home_com_adv{background-image: url(../images/intro2.png);background-size: cover;width: 50%;}
.home_com_adv h1{font-weight: bold;font-size: 34px;color: #FFFFFF;margin-top: 10vw;text-align: center;}
.home_com_adv dl{float: left; width:calc(100%/3);}
.home_com_adv dt{float: left; font-size: 50px; color: #aaa; width: 60px; text-align: center; padding-top: 10px;}
.tongji{margin-top: 6vw;text-align: center;color: #FFFCFC;}
.home_com_adv dd span{ line-height: 22px;font-weight: bold;font-size: 16px;color: #FFFCFC;}
.home_com_adv dd b{font-size: 2.5vw;color:#0098D1;}
.stepin-left{width: 50%;background-size: 100% 100%;text-align:center;margin-right: 5%;}
.stepin-right{width: 50%;background-size: 100% 100%;text-align:center;}
.stepin-right img{width: 100%;}
.culture{background-image: url(../images/culture.png);background-size: 100% 100%;height: 40vw;}
.c_text{margin-left: 15vw;}
.c_text h1{font-size:3vw;font-weight: bold;color: #005D9A;padding-bottom: 3vw;}
.c_text p{font-weight: 600;font-size: 24px;color: #0099D2;display: inline-block;line-height: 3vw;}
.wid.mid_text>img {width: 45%;padding: 2%;}
.mid_text{display: flex;flex-wrap: wrap;margin: 0 auto; justify-content: center;}


.download{font-family: Aref Ruqaa;font-weight: bold;font-size: 2vw;width: 100%;background: #0099D2;line-height: 240px;text-align: center;display: flex;justify-content: space-around;}
.download h1{font-family: Aref Ruqaa;font-weight: bold;font-size: 42px;color: #FFFFFF;text-shadow: 0px 4px 4px rgb(126 74 25 / 50%);display: inline-block;}
.download button{background: #FFFFFF;box-shadow: 0px 4px 4px rgb(126 74 25 / 25%);border-radius: 56px;width: 250px;height: 64px;font-size: 20px; margin: 30px 0px;border:none}
.footer {background: #333333;}
.footer_part{width: 80%;margin:0 auto;}
._flex{display: flex;justify-content: space-around;padding-top: 80px;padding-bottom: 78px;color: rgba(255, 255, 255, 0.7);}
.footer_item h3 {font-family: Arial;color: #FFFFFF;font-size: 20px;}
.footer_item ul {padding-top: 60px;}
.footer_left li {display: flex;align-items: center;}
.footer_left img {margin-right: 10px;}
.footer_item a {color: #fff;border: 1px solid #fff;padding: 5px;display: flex;align-items: center;}
.footer_last{text-align:center;font-size:1rem}
.footer_last a{color:#fff}
._flex li {padding-top: 15px;}
.intro1{text-transform: uppercase;font-size: 38px;background: rgba(194, 220, 230, 0.32);text-align: center;width: 100%;height: 100px;line-height: 100px;font-family: Futura Bk BT;}
.intro2{padding: 66px 0;font-size: 1.5vw;width: 80%;margin: 0 auto;line-height: 40px;text-align: center;}
.cer h1{font-family: Source Sans Pro;font-size: 48px;text-align: center;margin-top: 7vw;}
.cer-content{display:flex;justify-content: space-around;width: 80%;margin: 0 auto;padding: 2% 0 2%;}
.cap-intro{width:80%;text-align:center;font-size: 18px;padding-top:58px;padding-bottom:46px;color: #999999;margin: 0 auto;}
.cap-title {display: flex;align-items: center;justify-content: center;font-size: 34px;}


.home_adv{background: url(../images/home_capa_bg.jpg) no-repeat center; overflow: hidden;}
.home_adv_box{float: left; width: 32%; margin-right: 2%; background: #fff; padding: 20px; box-sizing: border-box;}
.home_adv_box:nth-child(3n){margin-right: 0;}
.home_adv_box .title{font-size: 24px; line-height: 34px; margin: 10px 0;}
.home_adv_box .des{font-size: 14px; line-height: 26px; color: #7e7e7e; height: 125px; text-indent: 2em;}
.home_adv_box .an{text-align: center;}
.home_adv_box .an a{display: inline-block; font-size: 12px; color: #000; line-height: 28px; padding: 0 15px; border-radius: 3px;border: 1px solid transparent;}
.home_adv_box .an a:hover{border: 1px solid #A40102; color: #A40102;}




.nybanner{position: relative;}
.nybanner img{
  width: 100vw;
  height: 35.4167vw;
}
.qysl{
  position: absolute;
  top: 12vw;
  
  color: white;
  
}
.qysl div{
  width: 27.8vw;
  height: 0.625vw;
  
  background: white;
}
.qysl h1{
  font-size: 3.65vw;
  margin: 0.5vw 0 0.5vw 7.3vw;
}
.qysl h2{
  font-size: 1.5625vw;
  line-height: 2.6vw;
  margin-left: 7.3vw;
  font-weight: 300;
}
.qysl h3{
  margin-left: 7.3vw;
  font-size: 1.83vw;
  color: rgb(23, 202, 241);
}
.mid_title{position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); color: #fff;}
.mid_title span{display: inline-block; padding: 35px 50px; background: #A40102; font-size: 36px; font-weight: normal;}
.mid_pos{ position: absolute; bottom: 0;right: 0; text-align:center; color:#fff;}
.mid_pos ul{ display:inline-block;padding:5px 20px; background: rgba(0,0,0,.6);}
.mid_pos li{ display:inline-block;}
.mid_pos li a{ color:#fff; display:block; line-height:24px;}
.mid_pos li a:hover{ text-decoration:underline;}

.mid{background-size:100% 100%;}
.mid_nav{position: relative; text-align: center; box-sizing: border-box; z-index: 100;}
.mid_nav a{display: inline-block; padding: 5px 15px; line-height: 23px; border: 1px solid #ddd; margin-left: 10px;margin-bottom:10px;}
.mid_nav a.act{background: #A40102; color: #fff;border: 1px solid #A40102;}
.mid_nav a:hover{background: #1E73BE; color: #fff;border: 1px solid #1E73BE;}

.about_adv{margin:50px 0; padding:50px 0; background:#f2f2f2;}
.about_adv dl{padding-left:50px; box-sizing:border-box;}

.prolist_des{ margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #ddd;}
.prolist_des .pic{float: left; max-width: 500px; margin-right: 25px;}
.prolist_des .pic img{border: 1px solid #eee; box-sizing: border-box;}
.prolist_des .text{color: #7e7e7e; line-height: 24px;}
.prolist_des .text b{color: #000; font-size: 15px;}
.prolist_des .text p{margin-bottom: 5px;}

.prolist{}
.prolist:after{ content:""; display:block; clear:both;}
.prolist dl{ width:25%; padding:0 1%; box-sizing:border-box; text-align:center; overflow:hidden; float:left;margin-bottom:15px;}
.prolist dl dt{ position:relative;width: 14.7395834vw;height: 14.7395834vw;display: flex;align-items: center;border: 1px #ebebeb solid;}
.prolist dl dt img{ max-width:100%; vertical-align:middle;/*border:1px #ebebeb solid;*/ box-sizing:border-box;}
.prolist dl dt span{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; background:#ccc;background:rgba(193,44,32,0.2); opacity:0;transition:320ms;}
.prolist dl dt span:before{ content:"";width:100%;height:0;border-left:3px solid #1E73BE;border-right:3px solid #1E73BE;box-sizing:border-box;position:absolute;left:0;top:0;transition:320ms;}
.prolist dl dt span:after{ content:"";width:0;height:100%;border-top:3px solid #1E73BE;border-bottom:3px solid #1E73BE;box-sizing:border-box;position:absolute;left:0;top:0;transition:320ms;}
.prolist dl:hover span{ opacity:1;transition:320ms;}
.prolist dl:hover dt span:before{ height:100%; transition:330ms 200ms;}
.prolist dl:hover dt span:after{ width:100%; transition:330ms 200ms;}
.prolist dl dt span b{ position:absolute; left:50%; top:50%; margin:-23px 0 0 -23px; width:46px; height:46px; display:block; z-index:10;}
.prolist dl dt span b:before{ position:absolute; left:0; top:23px; content:"";width:100%;height:1px; background:#c12c20;transform:translateX(-200px);}
.prolist dl dt span b:after{ position:absolute; left:23px; top:0; content:"";width:1px;height:100%; background:#c12c20;transform:translateY(-200px);}
.prolist dl:hover dt span b:before{ transform:translateX(0); transition:355ms 180ms;}
.prolist dl:hover dt span b:after{ transform:translateY(0); transition:355ms 180ms;}
.prolist dl dd{ font-size:16px; padding:9px 0 19px; font-weight:bold;line-height:22px; overflow:hidden;display:none;}
.prolist dl:hover dd{ color:#1E73BE;}

.procont_title{text-align: center; font-size: 36px; line-height: 46px; margin:10px 0 25px;}
.procont_pic{text-align: center;}
.procont_pic .procont_img{    width: 32vw;height: 32vw;display: flex;align-items: center;margin: auto;border: 1px solid #eee;}
.procont_pic img{ /*width: 100%; max-width: 600px; border: 1px solid #eee;*/ box-sizing: border-box;}
.procont_cont{padding: 20px 0;}


.contact>h1{font-size: 3vw;color: #FFFFFF;text-transform: uppercase;text-align: center;padding-top: 10%;}
.contact>.xian{margin:2% auto;}


.contact_send{width: 80%; border: 1px solid #ddd; padding: 25px 20px; box-sizing: border-box;background-color: #fff;margin: 0 auto;}
.contact_send_left{float: left; width: 49%;}
.contact_send_right{float: right; width: 49%;}
.contact_msg{display: flex;align-items: center;margin-top: 40px;}
.look_part {margin: 0;padding-left: 20px;}
.contact_send h2{font-size: 22px; }
.contact_send input{ width: 100%; line-height: 30px; border: 1px solid #ddd; margin-bottom: 15px; color: #7e7e7e; padding: 0 5px; box-sizing: border-box;}
.contact_send textarea{width: 100%; height: 215px; border: 1px solid #ddd; line-height: 24px; font-family: "微软雅黑"; box-sizing: border-box;}
.contact_send a{display: block; background: #1E73BE; color: #fff; text-align: center; padding: 5px 0; line-height: 22px;padding: 5px 0;}
.contact_send a:hover{background: #17CAF1;}
.contact_way {color: #666666;padding: 4% 0;}



@keyframes show{
	from{opacity: 0;}
	to{opacity: 1;}
}
.inleft{transform: translateX(-100px);}
.inright{transform: translateX(100px);}
.inbottom{transform: translateY(100px);}
.intop{transform: translateY(100px);}
.js-stt{opacity: 0; transition: 1s;}
.animate{opacity: 1; transform: translate(0) scale(1) rotate(0);}
/*分页代码*/
.pagelist {clear:both; font-size: 12px; padding:20px 0;text-align:center;}
.pagelist a{ padding: 5px 9px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin:3px; color:#666; font-family:宋体,arial,sans-serif;}
.pagelist a:visited, #nowpage { padding: 3px 8px; margin:3px; border: solid 1px #ddd; background: #fff; text-decoration: none; }
.pagelist a:hover, #nowpage{color:#97262a; background: #fff; border-color:#97262a; text-decoration: none;}

/*send*/
.pro_send{ padding-top:0px;}
.pro_send h2{ position:relative; font-size:24px; line-height:34px; color:#333; text-align:center; padding:40px 0 10px; margin-bottom:20px; border-top:1px solid #eee}
.pro_send h2:after{content:""; position:absolute; bottom:0; left:50%; margin-left:-30px;width:60px; height:3px; background:#1E73BE;}
.pro_send p{ text-align:center; margin-bottom:15px; font-size:13px; line-height:23px; color:#85868c;}
.pro_send input{ width:100%; font-size:14px; line-height:25px; padding:5px 12px; border:#e0e1e1 solid 1px; border-radius:1px; color:#8b8d94; margin-bottom:10px;box-sizing:border-box;}
.pro_send input::-webkit-input-placeholder{color:#ccc;}
.pro_send textarea{ width:100%; font-size:14px; line-height:25px; padding:5px 12px; border:#e0e1e1 solid 1px; border-radius:1px; color:#8b8d94; margin-bottom:10px;font-family: 'Sans';box-sizing:border-box;}
.pro_send textarea::-webkit-input-placeholder{color:#ccc;}
.pro_send a{ font-size:14px; line-height:38px; height:38px; color:#fff; padding:0 18px; background:#1E73BE; display:inline-block; margin-top:10px;}
.pro_send a:hover{ background:#00C3FC;}

/*产品标签*/
.tag{ margin:50px 0 10px;}
.tag strong{ font-size:16px;}
.tag a{ padding:0px 10px; line-height:32px; display:inline-block; background:#ebebeb; margin:0 5px; border-radius:3px; color:#666;}
.tag a:hover{color:#000;}

@media screen and (max-width:1599px){
.ban_text{padding: 6% 20px 0 6%;}
	}

@media screen and (max-width:1199px){
	
.wid{width: 94%;}
.ban_text{padding: 5% 20px 0 3%;}
	}

@media screen and (max-width: 1050px) {

.ban_text{padding: 5% 20px 0 3%;}
.ban_text h2{font-size: 30px; line-height: 40px;}
.ban_text p{font-size: 15px; line-height: 27px;}
.home_title{font-size: 30px; line-height: 40px;}
	}

@media screen and (max-width: 480px) {
.fl-1,.fl-2,.fl-3,.fl-4,.fl-5,.fl-6,.fl-7,.fl-8,.fl-9,.fl-10,.fl-11,.fl-12{width:100%; padding:10px; padding:10px;}
.fr-1,.fr-2,.fr-3,.fr-4,.fr-5,.fr-6,.fr-7,.fr-8,.fr-9,.fr-10,.fr-11,.fr-12{width:100%; padding:10px; padding:10px;}
	}

.posrelative {position: relative;}
.hideImgTitle {height:100%;overflow: hidden;margin: 0 1% 1% 0;}
.hideImgTitle:hover a {
            animation: mymove 1s 1;
            -webkit-animation: mymove 1s 1;
            /*Safari and Chrome*/
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            /* Safari 和 Chrome */
        }
        
        @keyframes mymove {
            from {
                bottom: -50px;
            }
            to {
                bottom: 0px;
            }
        }
        
        @-webkit-keyframes mymove
        /*Safari and Chrome*/
        
        {
            from {
                bottom: -50px;
            }
            to {
                bottom: 0px;
            }
        }
.hideTitle {display: block;width: 100%;height: 50px;background: #434343;color: #fff;position: absolute;bottom: -50px; overflow: hidden; transition: all 0.3s; line-height: 50px;text-align: center; }
.hideTitle:hover {color: #fff;text-decoration: none;}